<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ZUI-静姐姐-后台通用模板1</title>
		<link rel="stylesheet" href="css/zui.css" />
		<link rel="stylesheet" href="css/public.css" />
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script type="text/javascript" src="js/zui.min.js" ></script>
		
	</head>
	<body>
		<div class="y-conRightmain scrollbar-hover">
			<ol class="breadcrumb y-borderB">
			  <li><a href="your/url/">Home</a></li>
			  <li><a href="your/url/">Library</a></li>
			  <li class="active">Data</li>
			</ol>
			<div class="y-relative clearfix">
				<span class="pull-left y-absolute text-primary y-fontSize-16" style="line-height: 40px; left: 20px;">新增商品</span>
				<div class="pull-right" style="width: 100%; padding-left: 10rem;">
					<ul class="nav nav-pills">
					  <li id="y-inforTitle1" class="active" onclick="goodsInfor(1)"><a href="#">通用信息</a></li>
					  <li id="y-inforTitle2" onclick="goodsInfor(2)"><a href="#">详细描述</a></li>
					  <li id="y-inforTitle3" onclick="goodsInfor(3)"><a href="#">其他信息 </a></li>
					  <li id="y-inforTitle4" onclick="goodsInfor(4)"><a href="#">商品属性 </a></li>
					  <li id="y-inforTitle5" onclick="goodsInfor(5)"><a href="#">商品相册 </a></li>
					</ul>
				</div>
			</div>
				
			<div class="y-bgfff y-padLR-20 y-padB-20 y-padT-10 card y-marT-10">
				<div class="y-padT-20">
					<form class="form-horizontal">
						<div class="y-goodsInfor y-padB-20">
							<div id="y-goodsInfor1" class="">
							  <div class="form-group">
							    <label class="col-sm-2"><span class="text-danger">*&nbsp;</span>商品名称</label>
							    <div class="col-md-6 col-sm-10">
							      <input type="text" class="form-control" placeholder="商品名称" required="required">
							    </div>
							  </div>
							  <div class="form-group">
							    <label class="col-sm-2">商品简介</label>
							    <div class="col-md-6 col-sm-10">
							      <textarea class="form-control" rows="3" placeholder="可以输入多行文本"></textarea>
							    </div>
							  </div>
							  <div class="form-group">
							    <label class="col-sm-2">商品货号</label>
							    <div class="col-md-6 col-sm-10">
							      <input type="text" class="form-control" placeholder="商品货号">
							      <span class="y-fontSize-12 text-danger">不填写，可自动生成</span>
							    </div>
							  </div>
							  
							  <div class="form-group">
							    <label for="exampleInputAddress1" class="col-sm-2"><span class="text-danger">*&nbsp;</span>商品分类</label>
							    <div class="col-sm-2">
							      <select class="form-control">
							        <option>分类1</option>
							        <option>分类1</option>
							      </select>
							    </div>
							    <div class="col-sm-2">
							      <select class="form-control">
							        <option>分类1</option>
							        <option>分类1</option>
							      </select>
							    </div>
							    <div class="col-sm-2">
							      <select class="form-control">
							        <option>分类1</option>
							        <option>分类1</option>
							      </select>
							    </div>
							  </div>
							  <div class="form-group">
							    <label class="col-sm-2">商品品牌</label>
							    <div class="col-sm-2">
							      <select class="form-control">
							        <option>分类1</option>
							        <option>分类1</option>
							      </select>
							    </div>
							  </div>
							  <div class="form-group">
							    <label class="col-sm-2"><span class="text-danger">*&nbsp;</span>商品价格</label>
							    <div class="col-md-6 col-sm-10">
							      <input type="text" class="form-control" placeholder="商品价格">
							    </div>
							  </div>
							  <div class="form-group">
							    <label class="col-sm-2">市场价</label>
							    <div class="col-md-6 col-sm-10">
							      <input type="text" class="form-control" placeholder="市场价">
							      <span class="y-fontSize-12 text-danger">不填写，按照比例自动换算</span>
							    </div>
							  </div>
							  <div class="form-group">
							    <label class="col-sm-2">封面图</label>
							    <div class="col-md-6 col-sm-10">
							      <input type="file" class="form-control" value="">
							    </div>
							  </div>
							  
							  <div class="form-group">
							    <label class="col-sm-2">是否包邮</label>
							    <div class="col-md-6 col-sm-10">
							      <label class="radio-inline">
									  <input type="radio" name="radioOptionsExample"> 是
									</label>
									<label class="radio-inline">
									  <input type="radio" name="radioOptionsExample"> 否
									</label>
							    </div>
							  </div>
							  
							  <div class="form-group">
							    <label class="col-sm-2">总库存</label>
							    <div class="col-md-2 col-sm-10">
							      <input type="number" class="form-control" placeholder="库存">
							    </div>
							  </div>
							  <div class="form-group">
							  		<!--日期选择-->
								  <link href="css/datetimepicker.min.css" rel="stylesheet">
								  <script src="js/datetimepicker.min.js"></script>
								    <label class="col-sm-2">时间选择</label>
								    <div class="col-md-3 col-sm-3">
								        <input type="text" class="form-control form-datetime" placeholder="yyyy-MM-dd hh:mm" readonly>
								    </div>
								    <span class="pull-left" style="line-height: 35px;">至</span>
								    <div class="col-md-3 col-sm-3">
								        <input type="text" class="form-control form-datetime" placeholder="yyyy-MM-dd hh:mm" readonly>
								    </div>
								    <script>
								  	// 选择时间和日期
										$(".form-datetime").datetimepicker(
										{
										    weekStart: 1,
										    todayBtn:  1,
										    autoclose: 1,
										    todayHighlight: 1,
										    startView: 2,
										    forceParse: 0,
										    showMeridian: 1,
										    format: "yyyy-mm-dd hh:ii"
										});
								  </script>
								  <!--日期选择		end-->
							  </div>
							</div>
						  
						  	<div id="y-goodsInfor2" class="y-none">
						  		<!--富文本编辑器-->
						  		<link rel="stylesheet" href="css/kindeditor.min.css" />
						  		<script src="js/kindeditor.min.js"></script>
						  		
						  		<textarea name="content" style="width:80%;height:600px;visibility:hidden;"></textarea>
						  		<script>
									var editor;
									KindEditor.ready(function(K) {
										editor = K.create('textarea[name="content"]', {
											allowFileManager : true
										});
									});
								</script>
								<!--富文本编辑器		end-->
						  	</div>
						
							<div id="y-goodsInfor3" class="y-none">
							  
							  <div class="form-group">
							    <label class="col-sm-2">商品重量</label>
							    <div class="col-md-2 col-sm-6">
							      <div class="input-group">
									  <input type="text" class="form-control">
									  <span class="input-group-btn">
									    <span class="btn btn-default">KG</span>
									  </span>
									</div>
							    </div>
							  </div>
							  <div class="form-group">
							    <label class="col-sm-2">是否推荐</label>
							    <div class="col-md-6 col-sm-10">
							      <label class="radio-inline">
									  <input type="radio" name="radioOptionsExample"> 是
									</label>
									<label class="radio-inline">
									  <input type="radio" name="radioOptionsExample"> 否
									</label>
							    </div>
							  </div>
							  
							  <div class="form-group">
							    <label class="col-sm-2">总库存</label>
							    <div class="col-md-2 col-sm-10">
							      <input type="number" class="form-control" placeholder="库存">
							    </div>
							  </div>
							  <div class="form-group">
							    <label class="col-sm-2">库存不足警告</label>
							    <div class="col-md-2 col-sm-10">
							      <input type="number" class="form-control" placeholder="库存不足警告">
							    </div>
							  </div>
							  
							  <div class="form-group">
							    <label class="col-sm-2">免运费</label>
							    <div class="col-md-6 col-sm-10">
							      <label class="radio-inline">
									  <input type="radio" name="radioOptionsExample"> 是
									</label>
									<label class="radio-inline">
									  <input type="radio" name="radioOptionsExample"> 否
									</label>
							    </div>
							  </div>
							  <div class="form-group">
							    <label class="col-sm-2">是否上架</label>
							    <div class="col-md-6 col-sm-10">
							      <label class="radio-inline">
									  <input type="radio" name="radioOptionsExample"> 是
									</label>
									<label class="radio-inline">
									  <input type="radio" name="radioOptionsExample"> 否
									</label>
							    </div>
							  </div>
							</div>
						  	
						  	<div id="y-goodsInfor4" class="y-none">
								  <div class="form-group">
								    <label class="col-sm-2">商品属性</label>
								    <div class="col-sm-2">
								      <select class="form-control">
								        <option>水果</option>
								        <option>蔬菜</option>
								      </select>
								    </div>
								  </div>
							  
							</div>
						  
							<div id="y-goodsInfor5" class="y-none">
								<!--文件上传插件-->
								<link href="css/zui.uploader.min.css" rel="stylesheet">
								<script src="js/zui.uploader.min.js"></script>
								
								<div id="myUploader" class="uploader">
								  <div class="uploader-message text-center">
								    <div class="content"></div>
								    <button type="button" class="close">×</button>
								  </div>
								  <div class="uploader-files file-list file-list-grid"></div>
								  <div>
								    <hr class="divider">
								    <div class="uploader-status pull-right text-muted"></div>
								    <button type="button" class="btn btn-link uploader-btn-browse"><i class="icon icon-plus"></i> 选择文件</button>
								    <button type="button" class="btn btn-link uploader-btn-start"><i class="icon icon-cloud-upload"></i> 开始上传</button>
								  </div>
								</div>
								<script>
									/*var uploader = $('#myUploader').data('zui.uploader');
									uploader.files*/
									$('#myUploader').uploader({
									    autoUpload: false,            // 当选择文件后立即自动进行上传操作
									    url: '/yyj/url/img/', 						// 文件上传提交地址
									    filters:{
										    // 只允许上传图片或图标（.ico）
										    mime_types: [
										        {title: '图片', extensions: 'jpg,gif,png,jpeg'},
										        {title: '图标', extensions: 'ico'}
										    ],
										    // 最大上传文件为 1MB
										    max_file_size: '1mb',
										    // 不允许上传重复文件
										    prevent_duplicates: true
										}
									});
								</script>
								
								
								<!--文件上传插件		end-->
							</div>
						  
						</div>
						
					  
					  <div class="form-group y-marT-10">
					    <div class="col-sm-offset-2 col-sm-10">
					      <button type="submit" class="btn btn-primary">确认添加</button>
					    </div>
					  </div>
					</form>
				</div>
					
				
				
			</div>
			
		</div>
				
		<script type="text/javascript">
			function goodsInfor(id){
				$("#y-goodsInfor"+id).show();
				$("#y-goodsInfor"+id).siblings().hide();
				$("#y-inforTitle"+id).addClass("active").siblings().removeClass("active");
			}
		</script>
	</body>
</html>
